<template>
  <div class="login-container">
    <el-row>
      <!-- logo图标 -->
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="logo_box">
          <img src="../../assets/login_images/logo.png" alt />
        </div>
      </el-col>
      <!-- 展示文字 -->
      <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
        <div class="login_title">
          <p>全民消防“守护者”</p>
          <p style="text-align: right;">企业管理平台</p>
        </div>
      </el-col>
      <!-- 登录表单框 -->
      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
        <div class="login_title">
          <div class="login_box">
            <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="65px">
              <div class="select_title">欢迎登录</div>
              <el-form-item style="margin-top: 30px;" label="账号" prop="userName">
                <el-input
                  class="login_input"
                  v-model.trim="loginForm.userName"
                  v-focus
                  auto-complete="off"
                  placeholder="请输入用户名"
                  tabindex="1"
                  type="text"
                />
              </el-form-item>
              <el-form-item prop="password" label="密码">
                <el-input
                  ref="password"
                  v-model.trim="loginForm.password"
                  :type="passwordType"
                  placeholder="请输入密码"
                />
              </el-form-item>
              <el-form-item prop="code" label="验证码">
                <div class="code_row">
                  <el-input
                    ref="code"
                    v-model.trim="loginForm.code"
                    style="width:200px"
                    placeholder="请输入验证码"
                  />
                  <verifyCode></verifyCode>
                </div>
              </el-form-item>
              <div class="login_row">
                <div class="login_left">
                  <el-checkbox>记住密码</el-checkbox>
                </div>
                <div class="login_right">忘记密码?</div>
              </div>
              <el-button :loading="loading" class="login_btn" @click="handleLogin">登录</el-button>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import verifyCode from "@/components/verifyCode";
import { isPassword } from "@/utils/validate";
export default {
  name: "Login",
  directives: {
    focus: {
      inserted(el) {
        el.querySelector("input").focus();
      },
    },
  },
  components: { verifyCode },
  data() {
    const validateUserName = (rule, value, callback) => {
      if ("" == value) {
        callback(new Error("用户名不能为空"));
      } else {
        callback();
      }
    };
    const validateCode = (rule, value, callback) => {
      if ("" == value) {
        callback(new Error("验证码不能为空"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (!isPassword(value)) {
        callback(new Error("密码不能少于6位"));
      } else {
        callback();
      }
    };
    return {
      nodeEnv: process.env.NODE_ENV,
      title: this.$baseTitle,
      loginForm: {
        userName: "",
        password: "",
        code: "",
      },
      loginRules: {
        userName: [
          {
            required: true,
            trigger: "blur",
            validator: validateUserName,
          },
        ],
        code: [
          {
            required: true,
            trigger: "blur",
            validator: validateCode,
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            validator: validatePassword,
          },
        ],
      },
      loading: false,
      passwordType: "password",
      redirect: undefined,
    };
  },
  watch: {
    $route: {
      handler(route) {
        this.redirect = (route.query && route.query.redirect) || "/";
      },
      immediate: true,
    },
  },
  mounted() {
    //项目上线时记得去掉
    this.loginForm.userName = "admin";
    this.loginForm.password = "123456";
  },
  methods: {
    showPwd() {
      this.passwordType === "password"
        ? (this.passwordType = "")
        : (this.passwordType = "password");
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    handleLogin() {
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          await this.$store.dispatch("user/login", this.loginForm);
          const routerPath =
            this.redirect === "/404" || this.redirect === "/401"
              ? "/"
              : this.redirect;
          await this.$router.push(routerPath).catch(() => {});
          this.loading = false;
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.login-container {
  height: 100vh;
  min-height: 600px;
  background: url("~@/assets/login_images/background.png") center center fixed
    no-repeat;
  background-size: cover;
  .logo_box {
    width: 100%;
    padding: 20px 20px 20px 50px;
    img {
      height: 110px;
    }
  }
  .login_title {
    margin-top: 50px;
    padding: 50px;
    p {
      padding: 20px 100px 20px 100px;
      font-weight: bold;
      font-size: 100px;
      font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
      color: #d41d31;
    }
  }
  .code_row {
    width: 100%;
    display: flex;
    flex-direction: row;
  }
  .login_box {
    border: 1px solid #333;
    border-radius: 5px;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3);
    width: 400px;
    margin: auto;
    padding: 50px 25px 100px 25px;
    .login_btn {
      margin-top: 20px;
      border: 1px solid red;
      background: #d41d31;
      width: 100%;
      color: #ffffff;
      font-size: 15px;
    }
  }
  .select_title {
    font-size: 17px;
    color: #ffffff;
    padding: 10px;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid #ffffff;
  }
  .login_row {
    padding: 0px 5px 0px 5px;
    display: flex;
    flex-direction: row;
    .login_left {
      width: 50%;
    }
    .login_right {
      width: 50%;
      text-align: right;
      color: #666;
    }
    .login_right:hover {
      color: #d41d31;
    }
  }
}
</style>
